<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>manu-remote-unity-compiz</title>
    <style type="text/css">
      #initwait {
	      width: 100%;
	      height: 100%;
	      position: absolute;
	      top: 0px;
	      left: 0px;
	      z-index: 1000;
	      background: #505050;
	      opacity: 0.5;
	      display: none
      }
    </style>
  </head>
  <body onload="sendOrder('_reloadconf');" >
    <script type="text/javascript">
	function textChanged(e){
	  kc = Event.keyCode;
	  console.log('key: ' + hc);
	}
	function textOrder(orderStr){
	  var txt = document.getElementById('inputTexte').value;
	  if(!txt){return;}
	  document.getElementById('initwait').style.display = 'block';
	  var sOrd = orderStr + '/'  + txt;
	  console.log('orderStr: ' + sOrd);
	  var xmlhttp = new XMLHttpRequest();
	  var allPath = '/action/'+ sOrd;
	  xmlhttp.open("GET",allPath,false);
	  xmlhttp.send();
	  var rep = xmlhttp.responseText;
	  console.log('rep:'+rep);
	  document.getElementById('inputTexte').value='';
	  document.getElementById('initwait').style.display = 'none';
	}
  	function  sendOrder(orderStr) {
	  document.getElementById('initwait').style.display = 'block';
	  var xmlhttp = new XMLHttpRequest();
	  var allPath = '/action/'+ orderStr;
	  xmlhttp.open("GET",allPath,false);
	  xmlhttp.send();
	  var rep = xmlhttp.responseText;
	  console.log('rep:'+rep);
	  if("-OK-\n" == rep){
	    document.getElementById('initwait').style.display = 'none';
	  }
  	}
  	function convertOrder(phrase) {
	  var recherche = /(\S)+/g;
	  var r = recherche.exec(phrase);
	  console.log('*--*' +r);
	  console.log('**' +r.length);
	  var re='';
	  for (var i = 0 ; i < r.length ; i++){
	    var t = r[i];
	    console.log('ttt'+t);
	    if(re) re += ' space';
	    for (var j = 0 ; j < t.length ; j++){
	      if(re) re += ' ';
	      re += t[j];
	    }
	  }
	  return re;
  	}
  </script>
  
  
    <div id="initwait"></div>
    
    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
      <tbody>
        <tr>
          <td><br />
          </td>
          <td width="100" align="center"><img onclick="sendOrder('navig_haut');"
              width="140" height="140" src="images/haut.png" /></td>
          <td><br />
          </td>
        </tr>
        <tr>
          <td align="right"><img onclick="sendOrder('navig_gauche');" width="140"
              height="140" src="images/gauche.png" /></td>
          <td align="center"> <a onclick="sendOrder('navig_ok');" > <img width="100"
              height="100" src="images/carre_vert.jpg" /> </a> </td>
          <td><img onclick="sendOrder('navig_droite');" width="140" height="140"
              src="images/droite.png" /></td>
        </tr>
        <tr>
          <td><img onclick="sendOrder('settings');" width="130" height="130" src="images/settings.png" />
          </td>
          <td align="center" style="margin-left: 204px;"><img  onclick="sendOrder('navig_bas');"
              width="140" height="140" src="images/bas.png" /></td>
          <td align="center" style="margin-left: -372px;"><strong></strong><br />
            <div align="right"><u><strong><img onclick="sendOrder('return');" width="130" height="130" src="images/Fleche.png" /></strong></u></div>
          </td>
        </tr>
      </tbody>
    </table>
    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
      <tbody>
        <tr>
          <td align="center"><img onclick="sendOrder('switcher_unity');" width="325"
              height="63" src="images/alttab.png" longdesc="images/alttab.png" /></td>
        </tr>
      </tbody>
    </table>
    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
      <tbody>
        <tr>
          <td>
	    <img width="70" height="70" onclick="sendOrder('go_fermer');" src="images/close-icone-5186-64.png" />
          </td>
          <td width="100" align="center"><img  onclick="sendOrder('go_haut');" width="69"
              height="69" src="images/double-fleche-haut.png" /></td>
          <td align="right">
	    <img width="70" height="70" onclick="sendOrder('go_low_fermer');" src="images/close.png" />
          </td>
        </tr>
        <tr>
          <td align="right"><img width="69" height="69"  onclick="sendOrder('go_gauche');"
              src="images/double-fleche-gauche.png" /></td>
          <td align="center"> <img width="70" height="70"
              onclick="sendOrder('go_select');" src="images/carre_vert.png" /></td>
          <td><img width="70" height="70"  onclick="sendOrder('go_droit');" src="images/double-fleche-droite.png" /></td>
        </tr>
        <tr>
          <td><br />
          </td>
          <td align="center"><img width="70" height="70" onclick="sendOrder('go_bas');"
              src="images/double-fleche-bas.png" /></td>
          <td><br />
          </td>
        </tr>
        <tr>
          <td align="right" ><img width="60" height="60" onclick="textOrder('execute_bt');"
              src="images/exec.png" /></td>
          <td align="center" style="margin-left: 238px;"><input type="text" onKeyPress="textChanged(e)" id="inputTexte"
              name="inputTexte" /><br />
          </td>
          <td style="margin-left: -88px;"><img onclick="textOrder('start_bt');" 
              width="73" height="73" src="images/Start.png" /> </td>
        </tr>
      </tbody>
    </table>
    <p></p>
  </body>
</html>
